<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader :leftType="2" :noLeft="false" showTitle="适合你的服务"></myheader>
		<!-- #endif -->
		<view class="card">
			<view class="card-item" v-for="(item,index) in serviceList" :key="index">
				<image src="" class="card-item-img" mode=""></image>
				<view class="card-item-right">
					<view class="card-item-txt">我是名称 我有两行的高度</view>
					<view class="card-item-tag">
						<view class="card-item-tag-item" v-for="(ele, idx) in 10" :key="idx">
							我是推荐标签
						</view>
					</view>
					<view v-if="false" class="card-item-btn card-item-dingyue" @click.stop="dingyue(service)">
						免费订阅
					</view>
					<view style="display: flex;align-items: center;" v-else >
						<view class="card-item-dingyue card-item-border">
							看饮食推荐
						</view>
						<view style="color:#E74C3C;font-weight: 400;font-size: 14px;margin-left:4px">取消订阅</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myheader from '../../components/header/index.vue';
	import shoptabbar from '../../components/shop-tabbar/index.vue'
	export default {
		components: {
			myheader,
			shoptabbar
		},
		data() {
			return {
				dianzhaoList: [],
				serviceList: [],
				storeList: [1],
				foodList: [],
				id: '',
				dataLoading: 1,
				mealSeg: '',
				cookTypeOptionList: [],
				foodTypeOptionList: [],
				tasteOptionList: [],
				activeIndex: 3
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			setTimeout(() => {
				this.dataLoading = 2
			}, 1000)
				uni.showToast({
					icon: 'none',
					title: '专属服务马上准备完成，请稍候...',
				});
				let now = new Date().getTime();
				let date1 = new Date().setHours(4, 0, 0, 0);
				let date2 = new Date().setHours(9, 30, 59, 0);
				let date3 = new Date().setHours(9, 31, 0, 0);
				let date4 = new Date().setHours(14, 30, 59, 0);
				let date5 = new Date().setHours(14, 31, 0, 0);
				let date6 = new Date().setHours(17, 0, 59, 0);
				let date7 = new Date().setHours(17, 1, 0, 0);
				let date8 = new Date().setHours(21, 59, 59, 0);
				let date9 = new Date().setHours(22, 0, 0, 0);
				let date10 = new Date().setHours(3, 59, 59, 0);
				if (now >= date1 && now <= date2) {
					this.mealSeg = "早餐"
				} else if (now >= date3 && now <= date4) {
					this.mealSeg = "午餐"
				} else if (now >= date5 && now <= date6) {
					this.mealSeg = "下午茶"
				} else if (now >= date7 && now <= date8) {
					this.mealSeg = "晚餐"
				} else if (now >= date9 || now <= date10) {
					this.mealSeg = "宵夜"
				}
				
			// this.getDetail()
		},
		onReachBottom() {
			this.params.cursor++
			this.getMsg('add')
		},
		methods: {
			// 换一批
			async changeOne() {
				uni.showToast({
					icon: 'none',
					title: '专属服务马上准备完成，请稍候...',
				});
			},
			showSelectmealSeg() {
				this.$refs.popup2.open();
				this.$refs.popup.close();
			},
			async showShaiXuan() {
				this.$refs.popup2.close()
				uni.showLoading({
					title: '正在加载...',
					mask: true
				});
				//{id:"1",food_type:"xxxx"}
				if (this.foodTypeOptionList.length == 0) {
					let res = await this.$H.getToB("manage/basic/foodTypeData");
					if (res.code == 0) {
						for (let i = 0; i < res.data.length; i++) {
							this.foodTypeOptionList.push({
								"id": Number(res.data[i].id),
								"name": res.data[i].name
							})
						}
					}
				}
				//菜品类型暂无接口,pass
				// if (this.dishTypeOptionList.length == 0) {
			
				// }
				// {id:"1",taste_name:"xxx"}
				if (this.tasteOptionList.length == 0) {
					let res = await this.$H.getToB("manage/basic/getAllTastes");
					if (res.code == 0) {
						for (let i = 0; i < res.data.length; i++) {
							this.tasteOptionList.push({
								"id": Number(res.data[i].id),
								"name": res.data[i].name
							})
						}
					}
				}
				if (this.cookTypeOptionList.length == 0) {
					let res = await this.$H.postToB("manage/basic/getAllCookings");
					if (res.code == 0) {
						for (let i = 0; i < res.data.length; i++) {
							this.cookTypeOptionList.push({
								"id": Number(res.data[i].id),
								"name": res.data[i].name
							})
						}
					}
				}
				uni.hideLoading();
				this.$refs.popup.open();
			},
			closeShaiXuan() {
				this.$refs.popup.close();
			},
			goService() {
				uni.navigateTo({
					url: '/pages/shop/service'
				})
			},
			getMsg(flag) {
				this.$H.post("portal/feedback/list", this.params).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						if (res.data.cursor) {
							this.params.cursor = res.data.cursor
						}
						if (flag) {
							let arr = res.data.data ? res.data.data : []
							this.list = this.list.concat(arr)
						} else {
							this.list = res.data.data ? res.data.data : []
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
			submit() {
				if (!this.msg) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				this.$H.post("portal/feedback/post", {
					content: this.msg,
					pid: this.editMsg.id ? this.editMsg.id : null
				}).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						this.$refs.popup.close()
						this.msg = ''
						uni.showToast({
							title: '提交成功',
							icon: "none"
						})
						this.params.cursor = null
						this.getMsg()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
			openPop() {
				this.$refs.popup.open()
			},
			popupChange() {
				this.msg = ''
			},
			reply(item) {
				this.editMsg = Object.assign({}, item)
				this.$refs.popup.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 10px 10px 50px;
		&-item {
			display: flex;
			border-radius: 5px;
			margin-bottom: 10px;
			height: 120px;
			&-tag {
				display: inline-flex;
				white-space: nowrap;
				overflow: scroll;
				max-width: 200px;
				&-item {
					display: inline-block;
					margin-right: 4px;
					border: 1px solid rgba(234, 236, 239, 1);
					font-size: 12px;
					font-weight: 400;
					color: rgba(130, 146, 162, 1);
					padding: 2px;
					border-radius: 4px;
				}
			}
			&-right{
				flex:1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 6px 10px;
				background: #fff;
				border-bottom-right-radius: 5px;
				border-top-right-radius: 5px;
			}
			&-img {
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
				width: 120px;
				height: 120px;
				background: rgba(203, 209, 216, 1);
			}
			&-txt {
				max-width: 160px;
				color: #34495E;
				font-size: 16px;
				font-weight: 700;
				white-space: normal;
				word-break: break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			&-dingyue {
				display: inline-block;
				font-size: 14px;
				font-weight: 400;
				border-radius: 15px;
				padding: 4px 5px;
				margin-right: 10px;
			}
			&-border {
				border: 1px solid #1ABC9C;
				color: #1ABC9C;
				background: #fff;
			}
			&-btn {
				color: #fff;
				background-color: #1ABC9C;
				font-size: 14px;
				font-weight: 700;
				border: none;
				width: 66px;
				text-align: center;
			}
		}
	}
</style>